<!-- 室内定位地图展示 -->
<template>
  <div id="map">
    <div class="person" id="svgBox">
      <!-- <div class="nyimg">
        <img src="../../public/image/ny.png" alt width="100%" height="100%" />
      </div> -->
      <div class="svgWrap">
        <svg
          class="svg"
          width="800"
          height="385"
          viewBox="0 0 800 385"
          ref="svg"
          xmlns="http://www.w3.org/2000/svg"
        >
          <g class="svg-g">
            <!-- 档案中心 - 地图  ny => sn -->
            <!-- <image v-if="depotId == 9" x="0" y="0" width="800" height="300" href="../../public/image/sn.png" />
            <image v-if="depotId == 10" x="0" y="0" width="800" height="300" href="../../public/image/sn10.png" />
            <image v-else-if="depotId == 4" x="0" y="0" width="800" height="300" href="../../public/image/sn4.png" />
            <image v-else-if="depotId == 2" x="0" y="0" width="800" height="300" href="../../public/image/snE.png" /> -->

            <image v-if="depotCode == 'HAZYAGV'" x="0" y="0" width="800" height="300" href="../../public/image/sn.png" />
            <image v-if="depotCode == 'XZZHAGV'" x="0" y="0" width="800" height="300" href="../../public/image/sn10.png" />
            <image v-else-if="depotCode == 'WXHM'" x="0" y="0" width="800" height="300" href="../../public/image/sn4.png" />
            <image v-else-if="depotCode == 'NJLT'" x="0" y="0" width="800" height="300" href="../../public/image/snE.png" />

            <image v-if="depotCode == 'WXZX'" x="0" y="0" width="800" height="300" href="../../public/image/interior/WXZX.svg" />
            <image v-if="depotCode == 'WXXD'" x="0" y="0" width="800" height="300" href="../../public/image/interior/WXXD.svg" />
            <image v-if="depotCode == 'WXPLS'" x="0" y="0" width="800" height="300" href="../../public/image/interior/WXPLS.svg" />
            <image v-if="depotCode == 'NJBJ'" x="0" y="0" width="800" height="300" href="../../public/image/interior/NJBJ.svg" />
            <image v-if="depotCode == 'HZMP'" x="0" y="0" width="800" height="300" href="../../public/image/interior/HZMP.svg" />
            <image v-if="depotCode == 'SHYC'" x="0" y="0" width="800" height="300" href="../../public/image/interior/SHYC.svg" />
            <image v-if="depotCode == 'SHQP'" x="0" y="0" width="800" height="300" href="../../public/image/interior/SHQP.svg" />
            <image v-if="depotCode == 'XZZH'" x="0" y="0" width="800" height="300" href="../../public/image/interior/XZZH.svg" />
             
            <image v-if="depotCode == 'SZBDCAGV'" x="0" y="0" width="800" height="385" href="../../public/image/interior/SZBDCAGV.svg" />
            <image v-if="depotCode == 'SZSPJAGV'" x="0" y="0" width="800" height="385" href="../../public/image/interior/SZSPJAGV.svg" />
            <!-- HAZYAGV 9  -->
            <!-- <image v-if="depotCode == 'HAZYAGV'" x="0" y="0" width="800" height="300" href="../../public/image/interior/HAZYAGV.svg" /> -->
            
            <!-- <image v-if="depotCode" x="0" y="0" width="800" height="300" :href="'../../public/image/interior/'+ depotCode + '.svg'" /> -->
             
            <!-- 方山中行 -->
            <!-- v-if="depotCode == 'JSFSZH'"   v-if="depotId == '100003'"   -->
            <image v-if="depotCode == 'JSFSZH'" x="0" y="0" width="800" height="400" href="../../public/image/interior/JSFSZH.svg" />
          </g>


          <!-- 人员标识 - 围栏左侧 - 小白 => 监控 -->
          <image v-for="(monitor, index) in monitorList" :key="index" :x="monitor.xAxis" :y="monitor.yAxis" href="../../public/image/monitor.png"  width="18"
          height="18" @click="goMonitor(monitor.deviceId)" />

          <!-- 温湿度计 -->
          <!-- <image class="tempIcon" v-for="(temp, i) in tempList" :key="i" :x="temp.x" :y="temp.y" :id="temp.id" href="../../public/image/temperature.png"  width="18"
          height="18" /> -->

          <!-- <foreignObject v-for="(temp, i) in tempList" :key="i" width="16" height="16" :x="temp.x + 30" :y="temp.y">

            <img style="width:16px;height:16px" class="tempIcon" src="../../public/image/temperature.png" alt />

          </foreignObject> -->
       
          
          
          <!-- 温湿度计 -->
          <!-- <div v-for="(monitor, index) in monitorList" :key="index"> -->
            <!-- <foreignObject width="16" height="16" x="0" y="0">
              <div class="test" style="width:16px;height:16px">
                <img src="../../public/image/3.png" alt />
              </div>
            </foreignObject> -->

          <!-- </div> -->



          
          <!-- <foreignObject width="16" height="16" x="0" y="0">
            <div class="test" style="width:16px;height:16px">
              <img src="../../public/image/3.png" alt />
            </div>
          </foreignObject>
          <foreignObject width="16" height="16" x="100" y="0">
            <div class="test" style="width:16px;height:16px">
              <img src="../../public/image/3.png" alt />
            </div>
          </foreignObject>
          <foreignObject width="16" height="16" x="150" y="0">
            <div class="test" style="width:16px;height:16px">
              <img src="../../public/image/3.png" alt />
            </div>
          </foreignObject>
          <foreignObject width="16" height="16" x="250" y="0">
            <div class="test" style="width:16px;height:16px">
              <img src="../../public/image/3.png" alt />
            </div>
          </foreignObject> -->


        </svg>
      </div>
    </div>
  </div>
</template>

<script>
import $ from "jquery";
import mousewheel from "jquery.mousewheel";
import panzoom from "jquery.panzoom";

import axios from "axios";
import { baseEnv } from "@/request";
let baseUrl;
let moveTimer = null;
let clickTemTimer = null;
let isStop = {};
var dStr = {}; // 记录d的str
var paths;
var rem2;
const APIURL = require("../../public/ipConfigtest");
rem2 = 85.3;
export default {
  props: {
    depotId: {
      type: String,
      default: null,
    },
    depotCode: {
      type: String,
      default: null,
    }
  },
  data() {
    return {
      tempTimer: null,
      src: "",
      // Drawpath: "M10 ,10"
      monitorList: [],
      tempList: [],
    };
  },
  created() {
    this.getMonitorList()
  },
  mounted() {
    //  进入获得电子围栏数据
    baseUrl = "/api";
    // baseUrl='https://api.qcdoc.cn'
    // if (baseEnv == "development") {
    //   baseUrl = "/customer-aim";
    // } else {
    //   baseUrl = "http://demo.qcdoc.cn/customer-aim";
    //   // baseUrl = `${APIURL.BASE_URL}`

    // }


   // 电子围栏 ---- - 开始 -----------
   let polygonArr = [];
    axios
      .get(`${baseUrl}/iot/location/getFence?depotId=${this.depotId}`, {
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        }
      })
      .then(res => {
        console.log('围栏', res, res.data.data, '----------------')
        let data = (res.data.data && res.data.data.vertex) || [];
        // let data = []
        // [[{X:2, Y:3,Z:5}], [{X:4, Y:5,Z:6}], [{X:5, Y:6,Z:7}]];
        // if (this.depotId == 997)  {
        //   // 997的虚拟电子围栏
        //   data = [
        //     [
        //       // {X: 613.8, Y: 97.9, Z: 0},
        //       // {X: 614, Y: 1.25, Z: 0},
        //       // {X: 683.6, Y: 5.33, Z: 0},
        //       // {X: 683.6, Y: 98.6, Z: 0},
        //       // {X: 613.8, Y: 97.9, Z: 0}
        //       {X: 585, Y: 20, Z: 0},
        //       {X: 782, Y: 20, Z: 0},
        //       {X: 782, Y: 155, Z: 0},
        //       {X: 585, Y: 155, Z: 0},
        //       {X: 585, Y: 20, Z: 0}
        //     ]
        //   ]
        // }
        var keyMap = {
          x: "X",
          y: "Y",
          z: "Z"
        };

        // data && data.forEach((el, index) => {
        //   console.log(el, 'elqqqqqqqqqqq')
        //   // 外层
        //   el.forEach(e => {
        //     for (var key in e) {
        //       var newKey = keyMap[key];
        //       if (newKey) {
        //         e[newKey] = Number(e[key]);
        //         delete e[key];
        //       } else {
        //         delete e[key];
        //       }
        //     }
        //   });
        //   polygonArr.push(el);
        // });

        // console.log(polygonArr, 'wwwwwww')
        polygonArr = data

        for (let i = 0; i < polygonArr.length; i++) {
          let point = polygonArr[i];
          let pointsStr = "";
          for (let j = 0; j < polygonArr[i].length; j++) {
            pointsStr += `${polygonArr[i][j].x},${polygonArr[i][j].y} `;
          }
          this.createPolygonMaker(pointsStr);
        }
      });

      // 在中间加上  res.data.data.rows 中 文字描述
    // 电子围栏 ---- - 结束 -----------


    // 监听弹框事件
    this.$nextTick(() => {
      var domMap;
      var domIds = [];
      var id;
      var svg = document.getElementById("svgBox");

      svg.addEventListener("click", ev => {
        // this.$message("点击了svgBox" );
        
        var target = ev.target;
        var box = target.parentNode;
        console.log(ev, target.parentNode, target.parentNode.className, '苦苦九局')


        // 删除所有的弹窗 , 还原
        domIds.map(elId => {
          $(`#popbox${elId}`).remove();
          for (let i = 0; i < wrapObgjs.length; i++) {
            let el = wrapObgjs[i];
            if (el.dataset.id == parseInt(elId)) {
              num = i;
            }
          }
          wrapObgjs[num].setAttribute("width", 20);
          wrapObgjs[num].setAttribute("height", 20);
        })





        // if (target.className =='tempIcon') {

        //   console.log('mmmmmm', ev.target, ev.target.parentNode)
        //   // 将温湿度展示出来

        //   let mmwrapObgjs = document.getElementsByClassName("tempIcon");
        //   console.log('mmwrapObgjs', mmwrapObgjs[0].attributes)


        //   // let index = arr.findIndex(el => {
        //   //   return el.id == parseInt(domMap.id);
        //   // });
        //   // domMap.x = arr[index].x;
        //   // domMap.y = arr[index].y;
        //   // domIds.push(domMap.id);
        //   wrapObgjs[0].setAttribute("width", 260);
        //   wrapObgjs[0].setAttribute("height", 260);


        //   let cc = {
        //     deviceId: "3432423",hum: "84",id: "418431",name: "0",nodeId: "2",tem: "36",type: "3",
        //     x: "61.5164", y: "18.0014"
        //   }

        //   let conv = this.showPop(cc);
        //     $(target).prepend(conv);

        //     console.log($(target), '哈哈哈哈哈哈或或')

        //   return
        // }

        // console.log(1111, target.className, 'ppp')

        if (target.className == "imgTemp") {
        // if (target.tagName.toLowerCase() == "img") {
          // console.log(domIds, '哈哈哈哈')
          domIds = []

          domMap = target.dataset; // data属性
          // console.log(domMap, wrapObgjs, 'kk')
          var num;
          for (let i = 0; i < wrapObgjs.length; i++) {
            let el = wrapObgjs[i];
            if (el.dataset.id == parseInt(domMap.id)) {
              // console.log(domMap, el.dataset, 'kk')
              num = i;
            }
          }
          // let num = wrapObgjs.findIndex(el => {
          //   return el.dataset.id == parseInt(domMap.id);
          // });

          // console.log(arr, wrapObgjs, num, 'pppp')

          let index = tempArr.findIndex(el => {
            return el.id == parseInt(domMap.id);
          });
          domMap.x = tempArr[index].x;
          domMap.y = tempArr[index].y;
          domMap.tem = tempArr[index].tem ? tempArr[index].tem + '℃' : '-';
          domMap.hum = tempArr[index].hum ? tempArr[index].hum + '%' : '-';
          domIds.push(domMap.id);
          if (!tempArr[index].tem && !tempArr[index].hum) {
            // 没有温湿度 - 展示框隐藏
            wrapObgjs[num].setAttribute("width", 20);
            wrapObgjs[num].setAttribute("height", 20);
          } else {
            wrapObgjs[num].setAttribute("width", 200);
            wrapObgjs[num].setAttribute("height", 200);
          }

          // 获得温湿度信息
          // axios
          // .get(`${baseUrl}/iot/hygrometer/getValue?id=30060461`, {
          //   headers: {
          //     "Content-Type": "application/json;charset=UTF-8"
          //   }
          // }).then(res => {
          //   console.log(res, 'pp')
          //   // domMap.deviceId = res.data.data.deviceId
          //   // domMap.nodeId = res.data.data.nodeId
          //   // domMap.tem = res.data.data.tem
          //   // domMap.hum = res.data.data.hum

          //   domMap.deviceId = 3432423
          //   domMap.nodeId = 2
          //   domMap.tem = 36
          //   domMap.hum = 84

          //   let con = this.showPop(domMap);
          //   console.log(domMap, 'domMap')
          //   $(box).prepend(con);
          // })

          let con = this.showPop(domMap);
          $(box).prepend(con);
        } else if (target.tagName.toLowerCase() == "div") {
          // console.log(target.parentNode.dataset.id, '是div, 点击叉叉关掉')
          let i = domIds.findIndex(el => {
            return el == id;
          });
          id = target.parentNode.dataset.id;
          let num;
          for (let i = 0; i < wrapObgjs.length; i++) {
            let el = wrapObgjs[i];
            if (el.dataset.id == parseInt(id)) {
              num = i;
            }
          }

          $(`#popbox${id}`).remove();
          wrapObgjs[num].setAttribute("width", 20);
          wrapObgjs[num].setAttribute("height", 20);
        }
      });
      // let timerhh;
      // let pixe = 0;
      // let downpixe = 0;
      // var svgTag = document.querySelector("svg");
      // svg.addEventListener("wheel", ev => {
      //   clearTimeout(timerhh);
      //   timerhh = setTimeout(() => {
      //     if (ev.wheelDelta) {
      //       //判断浏览器IE，谷歌滑轮事件
      //       if (ev.wheelDelta > 0) {
      //         downpixe = 0;
      //         pixe = pixe + 1.2;
      //         let w = 1195 / pixe;
      //         let h = 821 / pixe;
      //         let vb = `${w/5} ${h/2} ${w} ${h}`;
      //         svgTag.setAttribute("width", w);
      //         svgTag.setAttribute("height", h);
      //         svgTag.setAttribute("viewBox", vb);
      //       }
      //       if (ev.wheelDelta < 0) {
      //         pixe = 0;
      //         downpixe = downpixe + 1.2;
      //         let w = 1195 * downpixe;
      //         let h = 821 * downpixe;
      //         let vb = `0 0 ${w/5} ${h}`;
      //         svgTag.setAttribute("width", w);
      //         svgTag.setAttribute("height", h);
      //         svgTag.setAttribute("viewBox", vb);
      //       }
      //     } else if (ev.detail) {
      //       // 火狐
      //       if (ev.detail > 0) {
      //         downpixe = 0;
      //         pixe = pixe + 1.2;

      //         let w = 1195 / pixe;
      //         let h = 821 / pixe;
      //         let vb = `${w} ${h/2} ${w} ${h}`;
      //         svgTag.setAttribute("width", w);
      //         svgTag.setAttribute("height", h);
      //         svgTag.setAttribute("viewBox", vb);
      //       }
      //       if (ev.detail < 0) {
      //         pixe = 0;
      //         downpixe = downpixe + 1.2;
      //         let w = 1195 * downpixe;
      //         let h = 821 * downpixe;
      //         let vb = `0 0 ${w} ${h}`;
      //         svgTag.setAttribute("width", w);
      //         svgTag.setAttribute("height", h);
      //         svgTag.setAttribute("viewBox", vb);
      //       }
      //     }
      //   }, 500);
      // });
    });

    //  运动轨迹 ---------  人
    let arr = [];
    var wrapObgjs = [];
    setTimeout(() => {
      console.log("getPosInfo22222222222222")
    axios
      .get(`${baseUrl}/iot/location/getPosInfo?depotId=${that.depotId}`, {
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        }
      })
      .then(res => {
        const alldata = res.data.data; //获取所有人点位信息

        // let alldata = [
        //   {tagId: 360572, tagName: 0, posX: 0, posY: "200.0928", posZ: "0.48"},
        //   {tagId: 416631, tagName: 0, posX: 300 , posY: "288.0014", posZ: "0.15"},
        //   {tagId: 418431, tagName: 0, posX: 0, posY: "218.0014", posZ: "1.2"},
        //   {tagId: 418222, tagName: 0, posX: "90.425", posY: "188.0014", posZ: "0.46"}
        //   ]

        alldata && alldata.forEach(el => {
          arr.push({
            id: el.tagId,
            type: 3, // 员工
            name: el.tagName,
            x: parseFloat(el.posX),
            y: parseFloat(el.posY)
          });
        });

        var list = document.getElementsByClassName("person");
        var frag = document.createDocumentFragment();
        var frag2 = document.createDocumentFragment();
        var svgBox = document.getElementsByClassName("svg");
        for (let i = 0; i < arr.length; i++) {
          this.createPerson(
            arr[i].x,
            arr[i].y,
            arr[i].type,
            arr[i].name,
            arr[i].id,
            i,
            frag
          );
          this.createpathMaker(arr[i].x, arr[i].y, frag2);
        }

        svgBox[0].appendChild(frag);
        svgBox[0].appendChild(frag2);
      
        moveRoute();
        wrapObgjs = document.querySelectorAll("foreignObject");
      });
    }, 400)
    // 单条线

    // 定时获取点位信息
    var that = this;
    function moveRoute() {
      //坐标点存储器
      var start = performance.now();
      // var boxs = document.querySelectorAll(".personDivWrap"); // 人的盒子
      var boxs = document.querySelectorAll("foreignObject"); // 人的盒子
      paths = document.querySelectorAll("path"); // 轨迹path
      var rafId = {}; //批量定义
      var point = {}; // 记录上一个值
      var lens = {}; // 记录最新的path长度
      // var dStr = {}; // 记录d的str
      var patharrs = {}; // 记录点位数组
      for (var j = 0; j < arr.length; j++) {
        var pointName = "point" + j; //动态定义变量名
        point[pointName] = { x: arr[j].x, y: arr[j].y }; //动态赋值
        var lenName = "len" + j;
        lens[lenName] = [];
        var rafIdName = "rafId" + j;
        rafId[rafIdName] = null;
        var pathArrName = "path" + j;
        patharrs[pathArrName] = [];
        var strName = "str" + j;
        dStr[strName] = `M${arr[j].x},${arr[j].y}`;
        var stopName = "stop" + j;
        isStop[stopName] = false;
        // 每条路径的总长度
        lens[`len${j}`] = paths[j].getTotalLength() || 0;

        // 人跟随运动
        // that.frame(
        //   lens[`len${j}`],
        //   isStop[`stop${j}`],
        //   boxs[j],
        //   start,
        //   paths[j],
        //   rafId[`rafId${j}`]
        // );
      }
      // let testPointArr = [
      //   { x: 209, y: 483 },
      //   {
      //     x: 123,
      //     y: 150
      //   },
      //   {
      //   {
      //     x: 203,
      //     y: 350
      //   },
      //   {
      //     x: 320,
      //     y: 485
      //   },
      //   {
      //     x: 320,
      //     y: 500
      //   }
      // ];
      // var boxs = document.querySelectorAll("foreignObject");
      // testPointArr.forEach((item, i) => {
      //   setTimeout(() => {
      //     let point = [item.x, item.y];
      //     that.setPath(point, patharrs[`path${0}`], 0, boxs[0]);
      //     boxs[0].setAttribute("x", item.x - 8);
      //     boxs[0].setAttribute("y", item.y - 8);
      //   }, i * 1000);
      // });
      let i = 1
      moveTimer = setInterval(() => {
        console.log("getPosInfo11111")
        axios
          .get(`${baseUrl}/iot/location/getPosInfo?depotId=${that.depotId}`, {
            headers: {
              "Content-Type": "application/json;charset=UTF-8"
            }
          })
          .then(res => {
            const alldata = res.data.data; //获取所有人点位信息
          // let alldata = [
          // {tagId: 418489, tagName: 0, posX: 276 + i++, posY: "245.0928", posZ: "0.48"},
          // {tagId: 418654, tagName: 0, posX: 386 - i++, posY: "245.0014", posZ: "0.15"},
          // {tagId: 419747, tagName: 0, posX: 278 - i++, posY: "242.0014", posZ: "1.2"},
          // {tagId: 419650, tagName: 0, posX: "273.946", posY: "111.467", posZ: "0.46"}
          // ]

          // console.log(wrapObgjs, 'wrapObgjswrapObgjs')
          // 清除地图上的小人
          for (let i = 0; i < wrapObgjs.length; i++) {
            // 如果wrapObgjs的data-type是3，则删除
            if (wrapObgjs[i].getAttribute("data-type") == 3) {
              wrapObgjs[i].parentNode.removeChild(wrapObgjs[i]);
            }
          }

          // 根据数据重新生成小人
          arr = []
          alldata && alldata.forEach(el => {
          arr.push({
            id: el.tagId,
            type: 3, // 员工
            name: el.tagName,
            x: parseFloat(el.posX),
            y: parseFloat(el.posY)
          });
        });

        var list = document.getElementsByClassName("person");
        var frag = document.createDocumentFragment();
        var frag2 = document.createDocumentFragment();
        var svgBox = document.getElementsByClassName("svg");
        for (let i = 0; i < arr.length; i++) {
          that.createPerson(
            arr[i].x,
            arr[i].y,
            arr[i].type,
            arr[i].name,
            arr[i].id,
            i,
            frag
          );
          that.createpathMaker(arr[i].x, arr[i].y, frag2);
        }

        svgBox[0].appendChild(frag);
        svgBox[0].appendChild(frag2);

        wrapObgjs = document.querySelectorAll("foreignObject");


        // 生成路径
            for (let k = 0; k < arr.length; k++) {
              let pointArr = [alldata[k].posX, alldata[k].posY]; // 最新的点位
              // let pathArr = point[`point${k}`];
              if (arr[k].id == alldata[k].tagId) {
                // console.log(point[`point${k}`], 'mmkkkkkk')
                //过滤前后重复的
                if (point[`point${k}`]) {
                  var chge = that.ckSamePt(point[`point${k}`], {
                    x: alldata[k].posX,
                    y: alldata[k].posY
                  });
                  // 判断前后两点间的距离 不相同的进行移动
                  if (chge) {
                    continue;
                  }
                }

                point[`point${k}`] = {
                  x: alldata[k].posX,
                  y: alldata[k].posY
                };
                // 画线patharrs[pathArrName]
                that.setPath(pointArr, patharrs[`path${k}`], k);
                // that.frame(lens[`len${k}`], boxs[k], start, paths[k]);

                that.frame(point[`point${k}`], boxs[k], arr[k]);
              }
            }
          });
      }, 1000);
    }
    // ---------------------------------------------------------------
    // // 获得温湿度计列表
    var tempArr = []
    const pp = () => {
      var that = this
      setTimeout(() => {
        axios
        .get(`${baseUrl}/iot/hygrometer/list?depotId=${that.depotId}`, {
          headers: {
            "Content-Type": "application/json;charset=UTF-8"
          }
        })
        .then(res => {
          that.tempList =  res.data.data
          const tempdata = res.data.data.sort((a, b) => {return parseFloat(b.x) - parseFloat(a.x)}); //获取温湿度计列表 - 排序 x大的先渲染

          tempdata && tempdata.forEach(el => {
            el['type'] = 2; // 温湿度计
            el['name'] = el.id + '温湿度计'; // 温湿度计
            tempArr.push({
              ...el,
              id: el.id,
              type: el.type,
              name: el.name,
              x: parseFloat(el.x),
              y: parseFloat(el.y)
            });
          });

          let list = document.getElementsByClassName("person");
          let frag = document.createDocumentFragment();
          let frag2 = document.createDocumentFragment();
          let svgBox = document.getElementsByClassName("svg");
          console.log(tempArr, 'oooo')
          for (let i = 0; i < tempArr.length; i++) {
            this.createTemp(
              tempArr[i].x,
              tempArr[i].y,
              tempArr[i].type,
              tempArr[i].name,
              tempArr[i].id,
              i,
              frag
            );
            // this.createpathMaker(tempArr[i].x, tempArr[i].y, frag2);
          }
          svgBox[0].appendChild(frag);
          svgBox[0].appendChild(frag2);

          // moveRoute();
          wrapObgjs = document.querySelectorAll("foreignObject");
        });
      }, 500)
    }
    // 获得温湿度计
    pp()
    this.tempTimer = setInterval(()=> {
      pp()
    }, 10*60*1000)
    // -------------------------------------------

    var that = this;
    window.addEventListener("resize", refresh(), false);
    function refresh() {
      var docEl = window.document.documentElement;
      var width = docEl.getBoundingClientRect().width;
      // if (width < 1366) {
      //   rem = width / 24;
      // } else if (width > 2560) {
      //   rem = width / 24;
      // } else {
      //   rem = width / 24;
      // }
    }
    refresh();
    var rem2;
    rem2 = 85.3;
    (function() {
      var map = $("#svgBox");
      var $panzoom = map.find(".svg").panzoom();
      var svg = document.getElementById("svgBox");
      svg.addEventListener("wheel", e => {
        // console.log('滚动');

        // e.preventDefault();
        // var delta = e.delta > 0;
        var delta = e.delta || e.wheelDelta > 0;
        let zoomOut = delta ? delta < 0 : e.wheelDelta.deltaY > 0;
        $panzoom.panzoom("zoom", delta, {
          increment: 0.1,
          animate: false,
          focal: e
        });
      });
      //  $panzoom.parent().on('mousewheel.map',function(e){
      //    e.preventDefault()
      //    var delta =  e.delta || e.originalEvent.deltaY>0
      //    $panzoom.panezoom('zoom',zoomOut,{
      //      increment:0.1,
      //      animate:false,
      //      focal:e
      //    })
      //  })
    })();


    // 循环点击温湿度计
    setTimeout(() => {
      this.addClickDom()
      clickTemTimer = setInterval(() => {
        this.addClickDom()
      }, 1000 * 60 * 1)
    }, 2000)

  },
  destroyed() {
    // 离开时 取消定时器
    console.log('取消定时器')
    clearInterval(moveTimer);
    clearInterval(this.tempTimer)
    clearInterval(clickTemTimer)
  },
  methods: {
    // 获得温湿度计的图标的元素，挨个点击
    addClickDom() {
      const dd = document.querySelectorAll(".imgTemp");
      console.log(dd, 'cdddddddddd')
      let time = 0

      for(let i = 0; i < dd.length; i++) {
        time += 2000
        setTimeout(() => {
          dd[i].click()
        }, time)
      }
    },

    // 室内地图放大或缩小
    zoomChange(type) {
      let big
      if (type == 'add') {
        // 放大
        big = false
      } else if (type == 'reduce') {
        // 缩小  
        big = true
      }
      let map = $("#svgBox");
      let $panzoom = map.find(".svg").panzoom({
        minScale: 0, //最小和最大放大比例
        maxScale: 3, 
        linearZoom: false,
        increment: 0.2,    //要放大的增量，大于0
        duration:200, //动画时间（ms）
        easing: 'ease-in-out'  //CSS简化用于缩放过渡
      });
      $panzoom.panzoom("zoom", big, {
        // increment: 0.1,
        // animate: false
      });
    },
    // 去监控页面
    goMonitor(id) {
      // let routeData = this.$router.resolve({
      //   path: "/monitor",
      //   query: {id: id}
      // });
      // window.open(routeData.href, "_blank");
      // const href = `http://192.168.6.9:8080/#/monitor?id=${id}`
      // window.open(href, "_blank");
    },
    // 获得监控列表
    getMonitorList() {
      let baseUrl = '/api'
      axios
      .get(`${baseUrl}/iot/camera/listByDepotId?depotId=${this.depotId}`, {
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        }
      })
      .then(res => {
        this.monitorList = res.data.data
      })
      // this.monitorList = [{x:60, y:150}, {x:60, y:260}, {x:135, y:118}, {x:165, y:118}, {x:165, y:260},
      // {x:190, y:118}, {x:190, y:260}]
    },


    /**
     * @pointArr 实时点位
     * @pathArr  path点位的数组
     * @path 轨迹path的dom结构
     */
    setPath(pointArr, pathArr, k) {
      pathArr.push([...pointArr]);
      // that.Drawpath += `L${pointArr[0]},${pointArr[1]}`;
      if (pathArr.length > 5) {
        let prePonit = pathArr.shift();
        let pathTemp = dStr[`str${k}`].split("L");
        pathTemp.splice(0, 1);
        let str = "";
        for (let i = 0; i < pathTemp.length; i++) {
          if (i == 0) {
            pathTemp[i] = `M${pathTemp[i]}`;
          } else if (i == pathTemp.length - 1) {
            let arr = pathTemp[i].split("M");
            pathTemp[i] = `L${arr[0]}M${arr[1]}`;
          } else {
            pathTemp[i] = `L${pathTemp[i]}`;
          }
          str += `${pathTemp[i]}`;
        }
        dStr[`str${k}`] = str;
        // 设置path值
        // paths[k].setAttribute("d", dStr[`str${k}`]);
        dStr[`str${k}`] = `${dStr[`str${k}`]}L${pointArr[0]},${pointArr[1]} M${
          pointArr[0]
        },${pointArr[1]}`;
        paths[k].setAttribute("d", dStr[`str${k}`]);
      } else {
        let pathTemp = dStr[`str${k}`].split("M");
        pathTemp.length > 2 ? pathTemp.splice(pathTemp.length - 1, 2) : null;
        pathTemp.length > 1 ? pathTemp.splice(0, 1) : null;
        pathTemp[0] = `M${pathTemp[0]}`;
        dStr[`str${k}`] = pathTemp[0];
        // paths[k].setAttribute("d", dStr[`str${k}`]);

        dStr[`str${k}`] = `${dStr[`str${k}`]}L${pointArr[0]},${pointArr[1]} M${
          pointArr[0]
        },${pointArr[1]}`;
        paths[k].setAttribute("d", dStr[`str${k}`]);
      }
      // console.log(dStr[`str${k}`], '轨迹');
    },
    // rafIds,
    frame(point, box, arr) {
      // console.log(point, '[[[[')
      box.setAttribute("x", point.x - 8);
      box.setAttribute("y", point.y - 8);
      // box.style.transform =
      //   "translate3d(" +
      //   (point.x - arr.x) / rem2 +
      //   "rem," +
      //   (point.y - arr.y - 8) / rem2 +
      //   "rem,0)"; // IE
      // box.style.WebkitTransform =
      // "translate3d(" +
      //   (point.x - arr.x) / rem2 +
      //   "rem," +
      //   (point.y - arr.y - 8) / rem2 +
      //   "rem,0)"; // Chrome&Safari
    },
    // 创建温湿度计
    createTemp(x, y, type, name, id, i, frag) {
      let wrapObgj = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "foreignObject"
      );
      let personDiv = document.createElement("div"); // 父盒子
      let imgDiv = document.createElement("div"); // 子盒子
      let person = document.createElement("img"); // 子元素
      person.className = "imgTemp";
      imgDiv.className = "imgDiv" + i;
      let svg = document.getElementsByClassName("svgWrap");
      personDiv.className = "personDivWrap personDiv" + i;
      // 展示温湿度计的图标
      this.src = require("../../public/image/temperature.png");

      person.src = this.src;
      person.setAttribute("data-id", id);
      person.setAttribute("data-name", name);
      person.setAttribute("data-type", type);
      // $(person)
      //   // .addClass("person")
      //   .css({
      //     width: 32,
      //     height: 32,
      //     // position: "relative",
      //     position: "absolute",
      //     top: x - 16,
      //     left: y - 16,
      //     zIndex: 10
      //   })
      //   .appendTo(".person");
      // .appendTo(".imgDiv");
      wrapObgj.setAttribute("x", x);
      wrapObgj.setAttribute("y", y);
      wrapObgj.setAttribute("data-id", id);
      wrapObgj.setAttribute("width", 16);
      wrapObgj.setAttribute("height", 16);
      // $(wrapObgj).css({
      //   width: 16,
      //   height: 16,
      //   top: x - 8,
      //   left: y - 8,
      //   // top: (y - 8) / rem2 + "rem",
      //   // left: (x - 8) / rem2 + "rem",
      //   position: "absolute",
      //   zIndex: 20
      // });
      frag.appendChild(wrapObgj);

      
      $(personDiv).css({
        width: 16,
        height: 16,
        // top: (y / svg[0].offsetHeight / 0.93) * 100 + "%",
        // left: (x / svg[0].offsetWidth) * 100 + "%",
        // top: (y - 8) / rem2 + "rem",
        // left: (x - 8) / rem2 + "rem",
        // position: "absolute",
        // zIndex: 20
        position: "relative"
      });
      frag.appendChild(wrapObgj).appendChild(personDiv);
      // .appendTo(`.person`);
      $(imgDiv).css({
        width: 16,
        height: 16,
        position: "absolute"
      });
      frag
        .appendChild(wrapObgj)
        .appendChild(personDiv)
        .appendChild(imgDiv);
      // .appendTo(`.personDiv${i}`);
      $(person).css({
        width: 16,
        height: 16
      });
      frag
        .appendChild(wrapObgj)
        .appendChild(personDiv)
        .appendChild(imgDiv)
        .appendChild(person)
      // .appendTo(`.imgDiv${i}`);
    },
    // 左侧展示人的图标
    createPerson(x, y, type, name, id, i, frag) {
      var wrapObgj = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "foreignObject"
      );
      let personDiv = document.createElement("div"); // 父盒子
      let imgDiv = document.createElement("div"); // 子盒子
      let person = document.createElement("img"); // 子元素
      // console.log(person, x, y, type, name, id, i, frag, '人的位置')
      person.className = "imgPerson";
      imgDiv.className = "imgDiv" + i;
      let svg = document.getElementsByClassName("svgWrap");
      personDiv.className = "personDivWrap personDiv" + i;
      // 左侧展示人的图标
      if (type == 0) {
        this.src = require("../../public/image/0.png");
      } else {
        // this.src = require("../../public/image/3.png");
        // 温湿度计
        this.src = require("../../public/image/3.png");
      }
      person.src = this.src;
      person.setAttribute("data-id", id);
      person.setAttribute("data-name", name);
      person.setAttribute("data-type", type);
      // $(person)
      //   // .addClass("person")
      //   .css({
      //     width: 32,
      //     height: 32,
      //     // position: "relative",
      //     position: "absolute",
      //     top: x - 16,
      //     left: y - 16,
      //     zIndex: 10
      //   })
      //   .appendTo(".person");
      // .appendTo(".imgDiv");
      wrapObgj.setAttribute("x", x);
      wrapObgj.setAttribute("y", y);
      wrapObgj.setAttribute("data-id", id);
      wrapObgj.setAttribute("width", 16);
      wrapObgj.setAttribute("height", 16);
      wrapObgj.setAttribute("data-type", type);
      // $(wrapObgj).css({
      //   width: 16,
      //   height: 16,
      //   top: x - 8,
      //   left: y - 8,
      //   // top: (y - 8) / rem2 + "rem",
      //   // left: (x - 8) / rem2 + "rem",
      //   position: "absolute",
      //   zIndex: 20
      // });
      frag.appendChild(wrapObgj);

      
      $(personDiv).css({
        width: 16,
        height: 16
        // top: (y / svg[0].offsetHeight / 0.93) * 100 + "%",
        // left: (x / svg[0].offsetWidth) * 100 + "%",
        // top: (y - 8) / rem2 + "rem",
        // left: (x - 8) / rem2 + "rem",
        // position: "absolute",
        // zIndex: 20
      });
      frag.appendChild(wrapObgj).appendChild(personDiv);
      // .appendTo(`.person`);
      $(imgDiv).css({
        width: 16,
        height: 16,
        position: "relative"
      });
      frag
        .appendChild(wrapObgj)
        .appendChild(personDiv)
        .appendChild(imgDiv);
      // .appendTo(`.personDiv${i}`);
      $(person).css({
        width: 16,
        height: 16
      });
      frag
        .appendChild(wrapObgj)
        .appendChild(personDiv)
        .appendChild(imgDiv)
        .appendChild(person)
      // .appendTo(`.imgDiv${i}`);
    },

    // 电子围栏
    createPolygonMaker(coords) {
      // console.log(coords, '电子围栏连点成线')
      var polygon = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "polygon"
      );
      polygon.setAttribute("points", coords);
      polygon.setAttribute(
        "style",
        "fill:rgba(255, 0, 0, 0.3);stroke:rgba(255, 0, 0, 0.8);stroke-width:1;"
      );
      $(polygon).appendTo(".svg-g");
    },

    // 创建路径
    createpathMaker(x, y, frag2) {
      // console.log(x, y, '创建路径createpathMaker')
      var pathMaker = document.createElementNS(
        "http://www.w3.org/2000/svg",
        "path"
      );
      // 创建路径 蓝色
      pathMaker.setAttribute("class", "testPath");
      pathMaker.setAttribute("d", `M${x},${y}`);
      pathMaker.setAttribute("stroke", "green");
      pathMaker.setAttribute("stroke-dasharray", "5,5");
      pathMaker.setAttribute(
        "style",
        "fill:none;stroke-dasharray:5,5;stroke :transparent;stroke-width:2px;"
      );
      // #47c9ff
      // $(pathMaker).appendTo(".svg");
      frag2.appendChild(pathMaker);
    },
    // 判断两点是否相等
    ckSamePt(p1, p2) {
      if (Math.abs(p1.x - p2.x) < 0.0001 && Math.abs(p1.y - p2.y) < 0.0001) {
        //判断两点间距离
        return true;
      }
      return false;
    },

    // 信息弹框 点击小人儿 展示
    showPop(data) {
      // console.log(data, data.id, '哈哈哈哈哈哈或或333')
      var types = {
        "1": "摄像头",
        "2": "温湿度计",
        "3": "员工",
      };
      // let content =
      //   `<div class="popbox" id="popbox${data.id}" data-id="${data.id}" style="top:32px;left:0px;">` +
      //   '<div class="title"><span style="margin: 20px;">信息弹框236</span></div>' +
      //   '<div class="m-box">' +
      //   '<div class="m-text">' +
      //   "<p>" +
      //   '<span class="m-span">id</span>' +
      //   '<span class="m-span">名称</span>' +
      //   '<span class="m-span">类型</span>' +
      //   "</p>" +
      //   "<p>" +
      //   '<span class="m-span2">' +
      //   data.id +
      //   "</span>" +
      //   '<span class="m-span2 status">' +
      //   data.name +
      //   "</span>" +
      //   '<span class="m-span2 ">' +
      //   types[data.type] +
      //   "</span>" +
      //   "</p>" +
      //   "</div>" +
      //   "</div>" +
      //   '<div class="myPopClose ' +
      //   "rock-box m-pop" +
      //   '"></div>' +
      //   "</div>";

      let content =
        `<div class="popbox" id="popbox${data.id}" data-id="${data.id}" style="top:20px;left:0px;">` +
        
        '<div class="m-box">' +
        '<div class="text">' +

        '<p class="item">' +
        // '<span class="left">温度：' +
        data.tem +
        "</span>" +
        // '<span class="right red">异常 </span>' +
        "</p>" +

        '<p class="item">' +
        // '<span class="left">湿度：' +
        data.hum +
        "</span>" +
        // '<span class="right green">正常 </span>' +
        "</p>" +
        "</div>" +
        "</div>" +

        // '<div class="myPopClose ' +
        // "rock-box m-pop" +
        // '"></div>' +
        "</div>";
      return content;

    }
  }
};
</script>

<style lang="scss">
.imgTemp {
  z-index: 9999;
}
#map {
  width: 90%;
  /* height: auto; */
  height: 96%;
  position: relative;
  z-index: 100;
  /* margin-top: 20px; */
  margin: 2% auto;
}
#map img {
  width: 100%;
  height: auto;
}
.person {
  width: 100%;
  /* height: auto; */
  height: 100%;
  position: relative;
}
.svgWrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* height: auto; */
  height: 100%;
  z-index: 10;
  display: flex;
}
.svg,
.nyimg {
  width: 100%;
  height: auto;
}
.svg {
  will-change: all;
  height: auto;
}
/*
cadetblue
 background-color: rgba(0,201,240,0.33);
*/
.popbox {
  // width: 2.5rem;
  width: 80px;
  position: absolute;
  z-index: 100000;
 
  background-image: radial-gradient(rgba(5, 44, 104, 0.6), rgba(14, 48, 106, 0.8));
  box-shadow: 0px 2px 13px 0px rgba(0,201,240,0.43);
  border: 1px solid #09f;
  border-radius: 5px;

  /*
  #3837a2
  */
  .myPopClose {
    right: 5px;
    border-radius: 5px;
  }
  .text {
    font-size: 15px;
    width: 100%;
    line-height: 25px;
    padding: 3px 0;
    .item {
      width: 100%;
      padding-left: 16px;
      //display: flex;
      //justify-content: space-between;
      //.left {
      //  width: 40px;
      //}

      .right {
        text-align: right;
        line-height: 20px;
        margin: 9px 0;
        padding: 1px 5px;
        border-radius: 5px;
        font-size: 12px;
      }
      .red {
        border: 1px solid red;
        color: red;
      }
      .green {
        border: 1px solid green;
        color: rgba(0, 255, 95, 1);
      }
    }
  } 
}

.title_p {
  border-left: 5px solid #09f;
  font-weight: 700;
  font-size: 0.8vw;
  line-height: 16px;
  padding-left: 10px;
  color: #333;
  margin-bottom: 12px;
}

#toolcheck {
  position: absolute;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: none;
}

#content {
  display: flex;
  justify-content: center;
  height: 100%;
  /* box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 3px; */
  position: relative;
  width: 100%;
  /* overflow: hidden; */
  margin-top: -0.5rem;
  /* background-color: black; */
}

#map-container {
  height: 100%;
  width: 100%;
  /* height: 800px;
  width: 80%; */
  position: relative;
}

.viewmode-group {
  position: absolute;
  right: 12px;
  top: 160px;
  border-radius: 6px;
  border: none;
}

.viewmode-group button {
  display: inline-block;
  width: 38px;
  height: 38px;
  border-radius: 4px;
  border: none;
  background-image: url("../../public/image/wedgets/3D.png");
}

.testPath {
  stroke-dasharray: 5000;
  stroke-dashoffset: 5000;
  animation: dash 1s linear 1;
  animation-fill-mode: forwards;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}
</style>